
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
<div class="archive_info">
<h1>JavaScript 模板字符串</h1>
<p>JavaScript 中的模板字符串是一种方便的字符串语法，允许你在字符串中嵌入表达式和变量。</p>
<p>模板字符串使用反引号 <span class="marked">``</span> 作为字符串的定界符分隔的字面量。</p>
<p>模板字面量是用反引号（<span class="marked">`</span>）分隔的字面量，允许多行字符串、带嵌入表达式的字符串插值和一种叫带标签的模板的特殊结构。</p>
<h3>语法</h3>
<pre>`string text`

`string text line 1
 string text line 2`

`string text ${expression} string text`

tagFunction`string text ${expression} string text`</pre>
<p><strong>参数</strong></p>
<ul><li><p><strong>string text</strong>：将成为模板字面量的一部分的字符串文本。几乎允许所有字符，包括换行符和其他空白字符。但是，除非使用了标签函数，否则无效的转义序列将导致语法错误。</p>
</li><li>
<p><strong>expression</strong>：要插入当前位置的表达式，其值被转换为字符串或传递给 tagFunction。</p>
</li><li>
<p><strong>tagFunction</strong>：如果指定，将使用模板字符串数组和替换表达式调用它，返回值将成为模板字面量的值。</p>
</li></ul>
<div class="example"><h2 class="example">实例</h2> <div class="example_code">
let text <span style="color: #339933;">=</span> `Hello RUNOOB<span style="color: #339933;">!</span>`<span style="color: #339933;">;</span><br/>
</div>
<br/>
<a class="tryitbtn"  rel="noopener noreferrer" target="_blank">尝试一下 »</a>
</div>
<h3>浏览器支持</h3>
<p>模板字面量是 ES6 新特性 (JavaScript 2015)，目前一些最新版本浏览器都支持：</p>
<table class="browserref">
<tbody><tr style="height:60px">
<th class="bsChrome" style="width:20%;" title="Chrome"></th>
<th class="bsEdge" style="width:20%;" title="Edge"></th>
<th class="bsFirefox" style="width:20%;" title="Firefox"></th>
<th class="bsSafari" style="width:20%;" title="Safari"></th>
<th class="bsOpera" style="width:19.9%;" title="Opera"></th>
</tr>
<tr>
<td>Chrome</td>
<td>Edge</td>
<td>Firefox</td>
<td>Safari</td>
<td>Opera</td>
</tr>
<tr>
<td>支持</td>
<td>支持</td>
<td>支持</td>
<td>支持</td>
<td>支持</td>
</tr>
</tbody></table>
<p>
模板字符串中可以同时使用单引号和双引号：</p>
<div class="example"><h2 class="example">实例</h2> <div class="example_code">
<div class="hl-main"><span class="hl-identifier">let</span><span class="hl-code"> </span><span class="hl-identifier">text</span><span class="hl-code"> = `</span><span class="hl-identifier">He</span><span class="hl-quotes">'</span><span class="hl-string">s often called "Runoob"`;</span></div>
</div>
<br/>
<a class="tryitbtn"  rel="noopener noreferrer" target="_blank">尝试一下 »</a>
</div>
<p>
模板字符串还支持多行文本，而无需使用特殊的转义字符：</p>
<div class="example"><h2 class="example">实例</h2> <div class="example_code">
<span style="color: #000066; font-weight: bold;">const</span> multiLineText <span style="color: #339933;">=</span> `<br>
  This is<br>
  a multi<span style="color: #339933;">-</span>line<br/>
  text.<br/>
`<span style="color: #339933;">;</span><br/>
</br></br></div>
<br/>
<a class="tryitbtn"  rel="noopener noreferrer" target="_blank">尝试一下 »</a>
</div>
<p>若要转义模板字面量中的反引号（<span class="marked">`</span>），需在反引号之前加一个反斜杠（<span class="marked">\</span>）。</p>
<pre>`\`` === "`"; // true</pre>
<p>
模板字面量用反引号（<span class="marked">`</span>）括起来，而不是双引号（<span class="marked">"</span>）或单引号（<span class="marked">'</span>）。</p>
<p>除了普通字符串外，模板字面量还可以包含占位符——一种由美元符号和大括号分隔的嵌入式表达式：<span class="marked">${expression}</span>。</p><p>
字符串和占位符被传递给一个函数（要么是默认函数，要么是自定义函数）。默认函数（当未提供自定义函数时）只执行字符串插值来替换占位符，然后将这些部分拼接到一个字符串中。</p>
<p>
模板字符串中允许我们使用变量：</p>
<div class="example"><h2 class="example">实例</h2> <div class="example_code">
<div class="hl-main"><span class="hl-reserved">const</span><span class="hl-code"> </span><span class="hl-identifier">name</span><span class="hl-code"> = </span><span class="hl-quotes">'</span><span class="hl-string">Runoob</span><span class="hl-quotes">'</span><span class="hl-code">;
</span><span class="hl-reserved">const</span><span class="hl-code"> </span><span class="hl-identifier">age</span><span class="hl-code"> = </span><span class="hl-number">30</span><span class="hl-code">;
</span><span class="hl-reserved">const</span><span class="hl-code"> </span><span class="hl-identifier">message</span><span class="hl-code"> = `</span><span class="hl-identifier">My</span><span class="hl-code"> </span><span class="hl-identifier">name</span><span class="hl-code"> </span><span class="hl-identifier">is</span><span class="hl-code"> $</span><span class="hl-brackets">{</span><span class="hl-identifier">name</span><span class="hl-brackets">}</span><span class="hl-code"> </span><span class="hl-identifier">and</span><span class="hl-code"> </span><span class="hl-identifier">I</span><span class="hl-quotes">'</span><span class="hl-string">m ${age} years old.`;</span></div>
</div><br/>
<a class="tryitbtn"  rel="noopener noreferrer" target="_blank">尝试一下 »</a></div><p>
以上实例中，<strong>${name}</strong> 和 <strong>${age}</strong> 是模板字符串的表达式部分，它们被包含在 <span class="marked">${}</span> 内部，并在运行时求值。</p>
<p>模板字符串允许你在字符串中引用变量、执行函数调用和进行任意的JavaScript表达式。</p>
<p>
模板字符串中允许我们使用表达式：</p>
<div class="example"><h2 class="example">实例</h2> <div class="example_code">
let price <span style="color: #339933;">=</span> <span style="color: #CC0000;">10</span><span style="color: #339933;">;</span><br>
let VAT <span style="color: #339933;">=</span> <span style="color: #CC0000;">0.25</span><span style="color: #339933;">;</span><br>
<br/>
let total <span style="color: #339933;">=</span> `Total<span style="color: #339933;">:</span> $<span style="color: #009900;">{</span><span style="color: #009900;">(</span>price <span style="color: #339933;">*</span> <span style="color: #009900;">(</span><span style="color: #CC0000;">1</span> <span style="color: #339933;">+</span> VAT<span style="color: #009900;">)</span><span style="color: #009900;">)</span>.<span style="color: #660066;">toFixed</span><span style="color: #009900;">(</span><span style="color: #CC0000;">2</span><span style="color: #009900;">)</span><span style="color: #009900;">}</span>`<span style="color: #339933;">;</span><br/>
</br></br></div><br/>
<a class="tryitbtn"  rel="noopener noreferrer" target="_blank">尝试一下 »</a></div>
<p>
模板字符串当作 HTML 模板使用：</p>
<div class="example"><h2 class="example">实例</h2> <div class="example_code">
let header <span style="color: #339933;">=</span> <span style="color: #3366CC;">""</span><span style="color: #339933;">;</span><br>
let tags <span style="color: #339933;">=</span> <span style="color: #009900;">[</span><span style="color: #3366CC;">"RUNOOB"</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">"GOOGLE"</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">"TAOBAO"</span><span style="color: #009900;">]</span><span style="color: #339933;">;</span><br/>
<br/>
let html <span style="color: #339933;">=</span> `<span style="color: #339933;">&lt;</span>h2<span style="color: #339933;">&gt;</span>$<span style="color: #009900;">{</span>header<span style="color: #009900;">}</span><span style="color: #339933;">&lt;/</span>h2<span style="color: #339933;">&gt;&lt;</span>ul<span style="color: #339933;">&gt;</span>`<span style="color: #339933;">;</span><br/>
<span style="color: #000066; font-weight: bold;">for</span> <span style="color: #009900;">(</span><span style="color: #000066; font-weight: bold;">const</span> x of tags<span style="color: #009900;">)</span> <span style="color: #009900;">{</span><br/>
  html <span style="color: #339933;">+=</span> `<span style="color: #339933;">&lt;</span>li<span style="color: #339933;">&gt;</span>$<span style="color: #009900;">{</span>x<span style="color: #009900;">}</span><span style="color: #339933;">&lt;/</span>li<span style="color: #339933;">&gt;</span>`<span style="color: #339933;">;</span><br/>
<span style="color: #009900;">}</span><br/>
<br/>
html <span style="color: #339933;">+=</span> `<span style="color: #339933;">&lt;/</span>ul<span style="color: #339933;">&gt;</span>`<span style="color: #339933;">;</span><br/>
</br></div><br/>
<a class="tryitbtn"  rel="noopener noreferrer" target="_blank">尝试一下 »</a></div>
<div class="scroll-top"><a >返回顶部</a></div>
</div>

    </body>
    </html>
    